<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="740px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="isUpdate ? '修改活动' : '添加活动'"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="活动名称:" prop="name">
        <el-input clearable v-model="form.name" placeholder="请输入活动名称" />
      </el-form-item>

      <el-form-item label="图片:" prop="activity_img">
        <span slot="label">
          图片

          <el-tooltip placement="top">
            <div slot="content"> 建议上传 750 * 350尺寸,或者等比例图片 </div>
            <i class="el-icon-question" />
          </el-tooltip>
        </span>
        <!--<ele-image-upload v-model="img" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" /> -->
        <div class="ele-image-upload-list">
          <div
            class="ele-image-upload-item ele-image-upload-button"
            @click="modalPicTap('dan', 'activity_img', '图片')"
          >
            <div>
              <div tabindex="0" class="el-upload el-upload--text">
                <div class="el-upload-dragger">
                  <i class="el-icon-plus ele-image-upload-icon"></i>
                </div>
                <div
                  class="ele-image-upload-item"
                  style="margin: 0 0 0 0"
                  v-if="form.activity_img != ''"
                >
                  <div class="el-image">
                    <img
                      :src="form.activity_img"
                      width="100%"
                      height="100%"
                      class="el-image__inner"
                      style="object-fit: cover"
                    />
                  </div>
                  <div
                    class="ele-image-upload-close"
                    @click="handleRemove('activity_img')"
                    ><i class="el-icon-close"></i
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="活动开始时间:" prop="activity_start_time">
        <el-date-picker
          v-model="form.activity_start_time"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="活动结束时间:" prop="activity_end_time">
        <el-date-picker
          v-model="form.activity_end_time"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="消费券类型:" prop="panic_buying_type">
        <el-radio-group v-model="form.panic_buying_type">
          <el-radio :label="1" value="1">普通发放</el-radio>
          <!-- <el-radio :label="2" value="2">红包</el-radio>
          <el-radio :label="3" value="3">红包雨</el-radio>
          <el-radio :label="4" value="4">刮一刮</el-radio> -->
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="每邀好友增加次数:"
        prop="invitation_obtain_frequency"
      >
        <el-input
          clearable
          v-model="form.invitation_obtain_frequency"
          placeholder="请输入次数"
        />
      </el-form-item>

      <el-form-item label="本轮活动总抢次数:" prop="total_claim_number">
        <el-input
          clearable
          v-model="form.total_claim_number"
          placeholder="请输入次数"
        />
      </el-form-item>

      <el-form-item label="描述:" prop="desc" v-if="visible">
        <tinymce-editor v-model="form.desc" :init="editorConfig" />
      </el-form-item>

      <div class="flex-between" style="margin-bottom: 20px">
        <div></div>
        <el-button type="success" @click="addList">添加优惠券 </el-button></div
      >
      <el-row :gutter="24">
        <el-col>
          <el-card
            class="analysis-chart-card"
            v-for="(item, index) in multiLensList"
            :key="index"
          >
            <template v-slot:header>
              <div class="ele-cell">
                <div>抢购时间</div>
                <div class="ele-cell-content">
                  <el-time-picker
                    v-model="item.start_time"
                    value-format=" HH:mm"
                    :picker-options="{
                      selectableRange: ''
                    }"
                    placeholder="开始时间"
                  >
                  </el-time-picker>
                </div>
                <div class="ele-cell-content">
                  <el-time-picker
                    v-model="item.end_time"
                    value-format=" HH:mm"
                    :picker-options="{
                      selectableRange: ''
                    }"
                    placeholder="结束时间"
                  >
                  </el-time-picker
                ></div>
                <div v-if="index != 0">
                  <el-link
                    @click="delList()"
                    type="danger"
                    :underline="false"
                    icon="el-icon-delete"
                  >
                    删除
                  </el-link>
                </div>
              </div>
            </template>

            <div class="container flex-between">
              <div>
                <el-form-item label="发放数量:" prop="claim_number">
                  <el-input
                    clearable
                    v-model="item.claim_number"
                    placeholder="发放数量"
                  />
                </el-form-item>
              </div>
            </div>
            <div class="Selcoupon">
              <member-select
                placeholder="请选择优惠券"
                v-model="item.satisfy_amount"
                @done="(e) => updateCount(e, index)"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消 </el-button>
      <el-button type="primary" :loading="loading" @click="save"
        >保存
      </el-button>
    </template>
    <uploadPictures
      :isChoice="isChoice"
      :visible.sync="modalPic"
      @getPic="getPic"
      :gridBtn="gridBtn"
      :gridPic="gridPic"
      :title="modalTitle"
    ></uploadPictures>
  </ele-modal>
</template>

<script>
import PagesSearch from '@/views/common/pages/pages-search';
import { add, update } from '@/api/activity';
import MemberSelect from '@/views/member/list/components/member-select';
import uploadPictures from '@/components/uploadPictures';
import EleImageUpload from 'ele-admin/es/ele-image-upload';
import TinymceEditor from '@/components/TinymceEditor';
const DEFAULT_FORM = {
  id: 0,
  name: '',
  activity_img: [],
  activity_start_time: '',
  activity_end_time: '',
  total_claim_number: '',
  claimed_number: '',
  invitation_obtain_frequency: '',

  expiration_time: '',
  status: 1,
  consumer_type: 1,
  panic_buying_type: 1,
  desc: '',
  multiLensList: []
};

export default {
  components: {
    MemberSelect,
    PagesSearch,
    EleImageUpload,
    uploadPictures,
    TinymceEditor
  },
  name: 'OpenEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    return {
      modalTitle: '选择图片',
      modalPic: false,
      isChoice: '单选',
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12
      },
      start_time: '',
      end_time: '',
      // 表单数据
      num: 1,

      form: { ...DEFAULT_FORM },
      // 表单验证规则
      rules: {},
      isUpdate: false,
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      editorConfig: {
        height: 525,
        relative_urls: false,
        convert_urls: false,
        images_upload_handler: (blobInfo, success, error) => {
          const file = blobInfo.blob();
          // 使用 axios 上传，实际开发这段建议写在 api 中再调用 api
          const formData = new FormData();
          formData.append('file', file, file.name);
          request({
            url: '/common/uploadFile',
            method: 'post',
            data: formData,
            onUploadProgress: (e) => {
              // 文件上传进度回调
            }
          })
            .then((res) => {
              if (res.data.code === 0) {
                success(res.data.data.url);
              } else {
                error(res.data.message);
              }
            })
            .catch((e) => {
              error('exception');
            });
        }
      },
      multiLensList: [
        {
          consumer_id: '',
          start_time: '',
          end_time: '',
          claim_number: '',
          satisfy_amount: '',
          deductible_amount: ''
        }
      ]
    };
  },
  methods: {
    search(where) {
      // debugger
      this.$refs.select.reload({
        where: where,
        page: 1
      });
    },
    // 选择图片
    modalPicTap(tit, picTit, openTitle) {
      this.modalTitle = openTitle;
      this.isChoice = tit === 'dan' ? '单选' : '多选';
      this.picTit = picTit;
      this.modalPic = true;
    },
    // 选中图片
    getPic(pc) {
      switch (this.picTit) {
        case 'activity_img':
          this.form.activity_img = pc.satt_dir;
          break;
      }
      this.modalPic = false;
    },
    //删除图片
    handleRemove(field) {
      this.form[field] = '';
    },
    /* 保存编辑 */
    updateCount(obj, index) {
    
      (this.multiLensList[index].consumer_id = obj.id),
      
      this.multiLensList[index].satisfy_amount =  obj.issue_type == 1?'满'+obj.satisfy_amount+'减'+obj.deductible_amount:'满'+obj.satisfy_amount+'折扣'+obj.deductible_amount+'%';
        (this.multiLensList[index].deductible_amount = obj.deductible_amount);
  
    },
    handleChange(value) {},
    addList() {
      let info = {
        consumer_id: '',
        start_time: '',
        end_time: '',
        claim_number: '',
        satisfy_amount: ''
      };
      this.multiLensList.push(info);
    },
    delList(index) {
      this.multiLensList.splice(index, 1);
    },
    save() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return false;
        }

        this.loading = true;
        const data = {
          ...this.form,
          multiLensList: this.multiLensList
        };

        const saveOrUpdata = this.isUpdate ? update : add;

        saveOrUpdata(data)
          .then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.updateVisible(false);
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  },
  watch: {
    visible(visible) {
      if (visible) {
        if (this.data) {
          this.$util.assignObject(this.form, {
            ...this.data
          });
          this.isUpdate = true;
        } else {
          this.isUpdate = false;
        }
      } else {
        this.$refs['form'].clearValidate();
        this.form = { ...DEFAULT_FORM };
      }
    }
  }
};
</script>
